// new Banner({
//   box: document.querySelector('.banner'), //轮播图图片 总框架
//   right: document.querySelector('.right'),//右按钮
//   left: document.querySelector('.left'),//做按钮
//   imgbox: document.querySelector('.imgbox'), //轮播图图片
//   data: bannerData,//图片数据
//   index: 0,//默认索引
// })
import { move } from "./move.js";
function Banner({ left, right, data, imgbox, box, index = 0 }) {
  this.index = index;
  this.box = box;
  this.imgbox = imgbox;
  this.left = left;
  this.right = right;
  this.data = data;
  this.init()
  this.addEvent()
  // this.moveIndex();
}
Banner.prototype.init = function () {
  let str = '';
  this.data.forEach(key => {
    str += `<img src="${key.src}" alt="${key.name}">`
  });
  this.imgbox.innerHTML = str;
  this.Width = this.imgbox.children[0].offsetWidth
  this.imgbox.style.width = this.data.length * this.Width + 'px';
  this.imgbox.style.left = -this.Width * this.index + 'px';
}

Banner.prototype.addEvent = function () {

  const that = this;
  //添加左右按钮事件
  this.left.onclick = function () {
    that.computedIndex('left')
  };
  this.right.onclick = function () {
    that.computedIndex('rigth')
  };
}
Banner.prototype.moveIndex = function () {
  const that = this;
  if (this.t) return;
  // 设置自动切换轮播图
  this.t = setInterval(() => {
    this.index === this.data.length - 1 ? this.index = 0 : this.index++;
    move(that.imgbox, {
      left: -that.Width * that.index
    })
  }, 2000)
}
Banner.prototype.computedIndex = function (data) {
  // 改变图片
  if (data === 'left') {
    this.index === 0 ? this.index = this.data.length - 1 : this.index--
  } else {
    this.index === this.data.length - 1 ? this.index = 0 : this.index++
  }
  console.log(this.index + '')
  this.changeImg(this.index)
}
Banner.prototype.changeImg = function (index) {
  clearInterval(this.t)
  this.t = null
  move(this.imgbox, {
    left: -this.Width * index
  })
  this.moveIndex()
}
export {Banner}